﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head lang="en">
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Engaged Blogger Template Documentation</title>
	<!-- Framework CSS -->
	<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
	<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
	<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
	<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
	<style type="text/css" media="screen">
		p, table, hr, .box { margin-bottom:25px; }
		.box p { margin-bottom:10px; }
		.center img {background:#333}
	</style>
</head>


<body>
	<div class="container">
	
		<h3 class="center alt">“Engaged - Responsive Blogger Template” Documentation by “SoraTemplate” v1.0</h3>
		
		<hr>
		
		<h1 class="center">
        <center><img src="http://2.bp.blogspot.com/-w2iBeGCvDts/VETxfpZWT-I/AAAAAAAACUQ/AUNhip1uDb4/s1600/engaged-logo.png"></center></h1>
		
		
		<div class="borderTop">
			<div class="span-6 colborder info prepend-1">
				<p class="prepend-top">
					<strong>
					Created: 20/10/2014<br>
					By: Soratemplates<br>
					
					</strong>
				</p>
			</div><!-- end div .span-6 -->		
	
			<div class="span-12 last">
				<p class="prepend-top append-0">Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email. Thanks so much!</p>
			</div>
		</div><!-- end div .borderTop -->
		
		<hr>
		
		<h2 id="toc" class="alt">Table of Contents</h2>
	  <ol class="alpha">
			<li><a href="#install">Installation</a></li>
            <li><a href="#logo">Upload Logo</a></li>
			     <li><a href="#main-menu0">Setting up the Social icons</a></li>
            <li><a href="#main-menu">Setting up the menu</a></li>
			<li><a href="#main-menu1">Setting up Slider</a></li>
			<li><a href="#Author">Edit Author Info</a></li>
     </ol>
		
		
		
		
<ol class="content alpha" style="padding:0;">
<hr>
			<h3 id="install"><li><strong>Installation</strong> - <a href="#toc">top</a></li></h3>
			<p> Now you have Engaged Blogger Template. You Can Follow This Steps To Upload Your Blogger Template To Blogger Platform. First Login to your Blogger DashBoard by Using Your Google Username And Password from <a href=http://www.blogger.com>Here</a>.</p>
	<p><b>Then follow these steps:  </b></p>
	
	 <p>1. On Blogger Dashboard Click Template.</p>
    <p>2. Click Backup/Restore button (Top Right).</p>
    <p>3. Click Choose ( Browse..) File button. Find where the “Engaged-Blogger-Template.xml” file location.</p>
    <p>4. Then Click Upload.</p>

<b><span class="highlight">Note</b></span>: Before Uploading This Template <b>Mobile Blogger Template</b> Must Enable to make Blogger Customize Work
	      <p><img src="assets/images/install.png" width="1025" height="526"></p>
			
            
           
						
            <hr>
			<h3 id="logo">
			  <li><strong>Upload Logo</strong>- <a href="#toc">top</a></li></h3>
			
			
		 <p>
                            <b>To Edit logo in this theme you can follow this step:</b>
                        </p>
						 <div class="row">				
						 <ol>
						 <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>(Top Menu) Scroll down and Find this Code :<br/><br/>
					
						 </li>
						 
						 <pre>  
                &lt;!-- main-logo --&gt; 

                                        &lt;div <span style=' color: Blue;'>class</span>='col-md-<span style=' color: Maroon;'>4</span> col-sm-<span style=' color: Maroon;'>12</span> header-logo'&gt; 
                 
                        &lt;a expr:href='data:blog.homepageUrl'&gt;&lt;img alt='Logo' height='<span style=' color: Maroon;'>146</span>' src='http:<span style=' color: Green;'>//2.bp.blogspot.com/-w2iBeGCvDts/VETxfpZWT-I/AAAAAAAACUQ/AUNhip1uDb4/s1600/engaged-logo.png' width='281'/&gt;&lt;/a&gt;</span> 
                    &lt;/div&gt;&lt;!-- end of #logo --&gt;</pre>
						 <li>Change image url with yours logo image url</li>
						 </ol>	                                                    
      				
			<hr>

				<h3 id="main-menu0">
			  <li><strong>Setting up the social icon</strong> - <a href="#toc">top</a></li>
		    </h3>
		
		 <p>
                            <b>To Edit social icons in this theme you can follow this step:</b>
                        </p>
						 <div class="row">				
						 <ol>
						 <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>(Top Menu) Scroll down and Find this Code :<br/><br/>
				
						 </li>
						 
						 <pre>  
                &lt;&lt;div <span style=' color: Blue;'>class</span>='social-icons'&gt; 

&lt;a <span style=' color: Blue;'>class</span>='facebook' href=<span style=' color: Maroon;'>'#'</span> target='_blank' title='Follow us on Facebok'&gt;&lt;i <span style=' color: Blue;'>class</span>='social_icon fa fa-facebook'/&gt;&lt;/a&gt; 

&lt;a <span style=' color: Blue;'>class</span>='twitter' href=<span style=' color: Maroon;'>'#'</span> target='_blank' title='Follow us on Twitter'&gt;&lt;i <span style=' color: Blue;'>class</span>='social_icon fa fa-twitter'/&gt;&lt;/a&gt; 

&lt;a <span style=' color: Blue;'>class</span>='googleplus' href=<span style=' color: Maroon;'>'#'</span> target='_blank' title='Follow us on Google+'&gt;&lt;i <span style=' color: Blue;'>class</span>='social_icon fa fa-googleplus'/&gt;&lt;/a&gt; 

&lt;a <span style=' color: Blue;'>class</span>='youtube' href=<span style=' color: Maroon;'>'#'</span> target='_blank' title='Follow us on Youtube'&gt;&lt;i <span style=' color: Blue;'>class</span>='social_icon fa fa-youtube'/&gt;&lt;/a&gt; 

&lt;a <span style=' color: Blue;'>class</span>='linkedin' href=<span style=' color: Maroon;'>'#'</span> target='_blank' title='Follow us on LinkedIn'&gt;&lt;i <span style=' color: Blue;'>class</span>='social_icon fa fa-linkedin'/&gt;&lt;/a&gt; 

&lt;a <span style=' color: Blue;'>class</span>='dribbble' href=<span style=' color: Maroon;'>'#'</span> target='_blank' title='Follow us on Dribbble'&gt;&lt;i <span style=' color: Blue;'>class</span>='social_icon fa fa-dribbble'/&gt;&lt;/a&gt;&lt;/div&gt;                    &lt;/div&gt;</pre>
						 <li>Change # with yours social links</li>
						 </ol>	                                                    
      				
		
			<h3 id="main-menu">
			  <li><strong>Setting up the menu</strong> - <a href="#toc">top</a></li>
		    </h3>
		
		 <p>
                            <b>To Edit Menu in this theme you can follow this step:</b>
                        </p>
						 <div class="row">				
						 <ol>
						 <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>(Top Menu) Scroll down and Find this Code :<br/><br/>
						<pre>&lt;ul <span style=' color: Blue;'>class</span>='nav navbar-nav' id='menu-main-menu'&gt; 

&lt;li <span style=' color: Blue;'>class</span>='menu-item ' id='menu-item-<span style=' color: Maroon;'>109</span>'&gt;&lt;a href=<span style=' color: Maroon;'>'#'</span>&gt;Typography&lt;/a&gt;&lt;/li&gt; 

&lt;li <span style=' color: Blue;'>class</span>='menu-item ' id='menu-item-<span style=' color: Maroon;'>56</span>'&gt;&lt;a href=<span style=' color: Maroon;'>'#'</span>&gt;Sample Page&lt;/a&gt;&lt;/li&gt; 

&lt;li <span style=' color: Blue;'>class</span>='menu-item' id='menu-item-<span style=' color: Maroon;'>158</span>'&gt;&lt;a <span style=' color: Blue;'>class</span>='dropdown-toggle' data-toggle='dropdown' href=<span style=' color: Maroon;'>'#'</span> title='Categories'&gt;Categories &lt;span <span style=' color: Blue;'>class</span>='caret'/&gt;&lt;/a&gt;

&lt;ul <span style=' color: Blue;'>class</span>=' dropdown-menu' role='menu'&gt; 
    &lt;li <span style=' color: Blue;'>class</span>='menu-item' id='menu-item-<span style=' color: Maroon;'>150</span>'&gt;&lt;a href=<span style=' color: Maroon;'>'#'</span>&gt;Business&lt;/a&gt;&lt;/li&gt; 
    &lt;li <span style=' color: Blue;'>class</span>='menu-item' id='menu-item-<span style=' color: Maroon;'>151</span>'&gt;&lt;a href=<span style=' color: Maroon;'>'#'</span>&gt;Inspiration&lt;/a&gt; 


    &lt;ul <span style=' color: Blue;'>class</span>=' dropdown-menu' role='menu'&gt; 
        &lt;li <span style=' color: Blue;'>class</span>='menu-item' id='menu-item-<span style=' color: Maroon;'>154</span>'&gt;&lt;a href=<span style=' color: Maroon;'>'#'</span>&gt;Weekend&lt;/a&gt;&lt;/li&gt; 
        &lt;li <span style=' color: Blue;'>class</span>='menu-item' id='menu-item-<span style=' color: Maroon;'>153</span>'&gt;&lt;a href=<span style=' color: Maroon;'>'#'</span>&gt;Technology&lt;/a&gt;&lt;/li&gt; 
        &lt;li <span style=' color: Blue;'>class</span>='menu-item' id='menu-item-<span style=' color: Maroon;'>152</span>'&gt;&lt;a href=<span style=' color: Maroon;'>'#'</span>&gt;Sport&lt;/a&gt;&lt;/li&gt; 
    &lt;/ul&gt; 
&lt;/li&gt; 

    &lt;li <span style=' color: Blue;'>class</span>='menu-item' id='menu-item-<span style=' color: Maroon;'>155</span>'&gt;&lt;a href=<span style=' color: Maroon;'>'#'</span>&gt;Moments&lt;/a&gt;&lt;/li&gt; 
    &lt;li <span style=' color: Blue;'>class</span>='menu-item' id='menu-item-<span style=' color: Maroon;'>156</span>'&gt;&lt;a href=<span style=' color: Maroon;'>'#'</span>&gt;Photography&lt;/a&gt;&lt;/li&gt; 
    &lt;li <span style=' color: Blue;'>class</span>='menu-item' id='menu-item-<span style=' color: Maroon;'>157</span>'&gt;&lt;a href=<span style=' color: Maroon;'>'#'</span>&gt;Uncategorized&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt; 
&lt;/li&gt; 
&lt;li <span style=' color: Blue;'>class</span>='menu-item' id='menu-item-<span style=' color: Maroon;'>100</span>'&gt;&lt;a href=<span style=' color: Maroon;'>'#'</span>&gt;Full width page&lt;/a&gt;&lt;/li&gt; 
&lt;li <span style=' color: Blue;'>class</span>='menu-item' id='menu-item-<span style=' color: Maroon;'>113</span>'&gt;&lt;a href=<span style=' color: Maroon;'>'#'</span>&gt;Page <span style=' color: Maroon;'>404</span>&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;    </pre>
						 </li>
						 <li>Change # with yours URL link</li>
						 </ol>	                                                    
      				
			<hr>
			
			
			
			
			<h3 id="main-menu1">
			  <li><strong>Setting up the slider</strong> - <a href="#toc">top</a></li>
		    </h3>
		
		 <p>
                            <b>To Edit slidr in this theme you can follow this step:</b>
                        </p>
						 <div class="row">				
						 <ol>
						 <li>On Blogger Dashbord Click <strong class="template">Template</strong></li>
						 <li>Click <strong class="buttonx">Edit HTML</strong></li>
						 <li>(Top Menu) Scroll down and Find this Code :<br/><br/>
					 <p> blogURL:'http://engaged-soratemplates.blogspot.com/',<p>
						 </li>
						 <li>Change url with yours blog url</li>
						 </ol>	                                                    
      				
	


	<hr><h3 id="author"><li><strong>Author Description</strong></strong> - <a href="#toc">top</a></li></h3>
			<p>Author image and description automatically fetch from Google + account. You just need to add info in you google+ account.And activate author infomation option from blogger settings</p>
						
			<b>To Activate author infomation in this theme, you can follow this step:</b>

<p>1. On Blogger Dashbord Click layout</p>

<p>2. Click Edit Blog Posts</p>

<p>3. SNow check same like below image :</p>
			
	<img src="assets/images/edit-longstyle.png"/>			<hr>
</ol>

<hr>
<p>&nbsp;</p>
<p>Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.</p> 
		
				<p><a href="#toc">Go To Table of Contents</a></p>
		
		<hr class="space">
	</div><!-- end div .container -->

</body></html>